﻿<html>
    <head>
    <meta charset="utf-8">
    <title>餐饮pos系统</title>
    <link id="easyuiTheme" rel="stylesheet" type="text/css" href="jslib/easyui1.4.2/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="jslib/easyui1.4.2/themes/icon.css"/>
    <script type="text/javascript" src="jslib/easyui1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="jslib/easyui1.4.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jslib/easyui1.4.2/l       ocale/easyui-lang-zh_CN.js" charset="utf-8"></script>
    <script type="text/javascript">
/* jquery入口*/    
$(function() {
    loadgrid(); //加载datagrid
});
/* 加载datagrid列表*/
    function loadgrid(){
        $('#grid').datagrid({
        title : '菜品类别',
        url : 'datagrid_foodtype.json',
        loadMsg : '正在加载…',  //当从远程站点载入数据时，显示的一条快捷信息。
        fit : true,  //窗口自适应
        nowrap: false, //设置为true，当数据长度超出列宽时将会自动截取
        fitColumns : true, // 自动适应列宽
        singleSelect : true, // 每次只选中一行
        sortName : 'id', //默认排序字段
        sortOrder : 'asc', // 升序asc/降序desc
        striped : true,  // 隔行变色  
        pagination : true,  // 在底部显示分页工具栏
        pageNumber : 1, //初始化页码 
        pageSize : 20,  // 指定每页的大小，服务器要加上page属性和total属性
        pageList : [ 20, 30, 50 ], // 可以设置每页记录条数的列表，服务器要加上rows属性
        //rownumbers : true, // 在最前面显示行号 
        idField : 'id', // 主键属性
        // 冻结列,当很多咧出现滚动条时该列不会动
        frozenColumns : [ [
        {title : '序号', width : '100', field : 'id', sortable : true}, 
        {title : '菜品类别名称', width : '100', field : 'foodtype_name', sortable : true}, 
        {title : '菜品类别描述', width : '100',    field : 'description',sortable : true}
        ] ],
             
        // 工具栏按钮
        toolbar: [
"-", {id: 'add', text: '添加',    iconCls: 'icon-add', handler: function () { add()} },
"-", {id: 'edit', text: '修改',   iconCls: 'icon-edit',   handler: function () { edit()} }, 
"-", {id: 'remove', text: '删除',iconCls: 'icon-remove', handler: function () {remove()} }, 
"-", {id: 'remove',  text: '刷新',iconCls: 'icon-reload', handler: function () {reload()} } 
        ]
    });
}
</script>
    </head>
    <body>
        <div style="width:100%;height:100%;padding:0px;overflow:hidden">
    <table id="grid"></table>
</div>
    </body>
</html>